<template>
  <div class="cards-view">
    <van-nav-bar class="custom-nav-bar" title="卡券" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-tabs v-model:active="activeName">
      <van-tab :title="`待使用${wait1}`" name="a">
        <div v-for="item in 5"><img class="cards-img" src="../../assets/img/red.png" alt=""></div>
        <van-empty description="空空如也" v-if="Number(wait1) == 0" />
      </van-tab>
      <van-tab :title="`已使用${used}`" name="b">
        <div v-for="item in 0"><img class="cards-img" src="../../assets/img/red.png" alt=""></div>
        <van-empty description="空空如也" v-if="Number(used) == 0" />
      </van-tab>
      <van-tab :title="`已过期${expired}`" name="c">
        <div v-for="item in 0"><img class="cards-img" src="../../assets/img/red.png" alt=""></div>
        <van-empty description="空空如也" v-if="Number(expired) == 0" />
      </van-tab>
    </van-tabs>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const $router = useRouter();
const onClickLeft = () => $router.back();
const activeName = ref('a');
const wait1 = ref('5');
const used = ref('0');
const expired = ref('0');
</script>
<style lang="less" scoped>
.cards-img {
  width: 100%;
  margin-top: 10px;
}
</style>